<template>
  <div class="content" ref="content">
      <ul class="order_box" v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="10"
            :infinite-scroll-immediate-check="true">
        <router-link class="order_list" v-for="(item,index) in list" :key="index" tag="li" :to='{name:"order_details",params:{id:item.id}}'>
          <div class="left">
          <span>{{item.types | typess}}</span>
          <p>{{item.create_time | dates}}</p>
          </div>
          <div class="right"><span class="amount">{{item.amount}}</span></div>
        </router-link>
      </ul>
      <p class="page-infinite-loading" ref="spinner">
            <mt-spinner type="fading-circle" color="#23ab1b" class="spinner"></mt-spinner>
            加载中...
        </p>
      <div v-if="isShow" style="text-align:center" class="common-li">暂无订单记录</div>
  </div>
</template>

<script>
import { Toast  } from 'mint-ui'
export default {
  data () {
    return {
      list: [],
      isShow: false,
      start: 0,
      limit: 10,
      loading: false,
      isScroll: true
    }
  },
  mounted () {
    this.$refs.spinner.style.display = 'none'
    this.$apiPost('amount_list',{'start': this.start, 'limit': this.limit}).then((data) => {
      if (data.data.length === 0) {
        this.isShow = true
      } else {
         if (data.status === 0) {
            this.list = data.data
            this.color()
          }
      }
    })
  },
  methods: {
    loadMore() {
      if (this.isScroll) {
        this.$refs.spinner.style.display = 'block'
        this.loading = true
        setTimeout(() => {
        this.start = this.start + 10
        this.$apiPost('amount_list',{'start': this.start, 'limit': this.limit}).then((data) => {
            if (data.data.length > 0) {
              this.list = this.list.concat(data.data)
              this.color()
            } else {
              this.$refs.spinner.style.display = 'none'
                this.isScroll = false
                Toast({ message: '没有更多了',position: 'bottom', duration: 2000})
            }
          })
        this.loading = false
      }, 2000)
       }
    },
    color () {
       this.list.map((item,i) => {
              if(item.amount*1 >= 0) {
                setTimeout(() => {
                  var boxs = Array.from(document.getElementsByClassName('amount'))
                    boxs[i].style.color = '#5CC547'
                    boxs[i].innerHTML = `+${this.list[i].amount}`
                },200)
              } else if(item.amount*1 < 0) {
                 setTimeout(() => {
                  var boxs = Array.from(document.getElementsByClassName('amount'))
                    boxs[i].style.color = 'red'
                },200)
              }
            })
    }
  },
  filters: {
    dates (str) {
      var time = new Date(str*1000)
      return time.toLocaleDateString()
    },
    typess (str) {
      if (str === 1) {
        return '见点奖'
      } else if (str === 2) {
        return '直推奖'
      } else if (str === 3) {
        return '培育奖'
      } else if (str === 4) {
        return '量碰奖'
      } else if (str === 5) {
        return '提现'
      }
    }
  }
}
</script>
<style scoped lang = 'scss'>
.order_box{
  width: 100%;
  height: auto;
   background: #fff;
   padding:0 16px 0 16px;
  .order_list{
    width: 100%;
    padding: 0.12rem 0 .12rem 0;
    border-top: 1px solid #E5E5E5;
    overflow: auto;
    &:nth-of-type(1){
      margin-top: 10px;
      border-top:none
    }
    .left{
      width:50%;
      float: left;
      span{
        font-size: 12px;
        color: #333;
      }
      p{
        font-size: 10px;
        color: #999;
      }
    }
    .right{
      width: 50%;
      height: 100%;
      float: right;
      color: #333;
      font-size: 15px;
      text-align: center;
      line-height: 40px;
      span{
         float: right;
      }
    }
  }
}
.page-infinite-loading {
  text-align: center;
  line-height: 37px;
  .spinner {
    display: inline-block;
    width: 28px;
    vertical-align: middle;
  }
}
</style>
